 <template>
  <div class="personal-center">
    <div class="head-box">
      <div class="head">
        <div class="setIcon">
          <img @click="goSetPage" src="../assets/image/形状_35.png" alt="">
        </div>
        <div class="user" @click="goto(7)">
          <img class="user-img" :src="userInfo.userImg" alt="">
          <div class="userInfo">
            <div class="userName">
              {{userInfo.userName}}
              <img src="../assets/image/icon／箭头.png" alt="">
            </div>
            <div class="userMsg">{{userInfo.userMsg}}</div>
          </div>
        </div>
        <div class="function-item">
          <div class="find" @click="goto(1)">
            <img src="../assets/image/icon／寻车记录.png">
            <span>寻车记录</span>
          </div>
          <div class="mortgage" @click="goto(2)">
            <img src="../assets/image/icon／按揭记录.png">
            <span>按揭记录</span>
          </div>
          <div class="footprint" @click="goto(3)">
            <img src="../assets/image/icon／我的足迹.png">
            <span>我的足迹</span>
          </div>
          <div class="collect" @click="goto(4)">
            <img src="../assets/image/icon／我的收藏.png">
            <span>我的收藏</span>
          </div>
        </div>
      </div>
    </div>

    <div class="dataStatistics">
      <div class="title">数据统计</div>
      <div class="content">
        <div class="find-stat" @click="goto(5)">
          <img src="../assets/image/pic／寻车统计.png" alt="">
        </div>
        <div class="mortgage-stat" @click="goto(6)">
          <img src="../assets/image/pic／按揭意向统计.png" alt="">
        </div>
      </div>
    </div>

    <div class="other-function">
      <div class="my-car" @click="goto(8)">
        <div class="left">
          <img src="../assets/image/icon／我的爱车.png" alt="">
          <span>我的爱车</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="my-car" @click="goto(9)">
        <div class="left">
          <img src="../assets/image/icon／我的爱车(1).png" alt="">
          <span>寻车管理</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="my-car" @click="goto(10)">
        <div class="left">
          <img src="../assets/image/icon／我的爱车(2).png" alt="">
          <span>按揭意向管理</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- <div class="my-car" @click="$router.push({name: 'demo'})">
        <div class="left">
          <span>demo</span>
        </div>
        <div class="right">
          <van-icon name="arrow" />
        </div>
      </div> -->
    </div>
    <div class="blank"></div>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        userInfo: {
          id:'111',
          userName: '东哥说车',
          userMsg: '8年汽车评测达人',
          // userImg: 'https://img0.baidu.com/it/u=3332467979,4048605383&fm=26&fmt=auto'
          userImg: 'https://chezhuapp.oss-cn-beijing.aliyuncs.com/image/20211204/0622a13001b94a088bca5f8e5cbe0787.jfif'
        }
      }
    },
    methods: {
      goto(n) {
        const map = {
          1: { path: 'FindCarRecord' },
          2: { path: 'MortgageRecode' },
          3: { path: 'collectionAFootprint', status: 0 },
          4: { path: 'collectionAFootprint', status: 1 },
          5: { path: 'FindCarStatistics' },
          6: { path: 'MortgageStatistic' },
		      7: { path:'UserInfo' },
		      8: { path:'MyCar' },
          9: { path: 'findCarManagement' },
		  10: { path: 'MortgageList' },
        }
        this.$router.push({
          name:map[n].path,
          query:{
            id: this.userInfo.id,
            status:map[n].status
          }
        })
      },
      goback() {
        console.log(1)
        this.$router.go(-1)
      },
      goSetPage(){
        this.$router.push({name:'SetInfo'})
      },
      // 监听横竖屏
      screenStatus() {
        let screen = window.orientation
        if (screen === 180 || screen === 0) {
          // console.log('竖')
        } else {
          // console.log('横')
          plus.screen.lockOrientation("landscape-primary")
        }
      },
    },
    mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
      // 实时监听屏幕大小变化
      window.addEventListener("resize", this.screenStatus)
    }
}
</script>

<style scoped lang="less">
  .blank{
    margin-bottom: 12vh;
  }
  .personal-center{
    .head-box{
      .head{
        box-sizing: border-box;
        height: 245px;
        padding: 58px 16px 16px 16px;
        background-image: url('../assets/image/bg.png');
        background-size: 100%;
        .setIcon{
          color: #333333;
          // display: block;
          height: 20px;
          padding-bottom: 13px;
          img{
            float: right;
            font-size: 20px;

          }
        }
        .user{
          display: flex;
          align-items: center;
          padding-bottom: 25px;
          .user-img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
          .userInfo{
            margin-left: 13px;
            .userName{
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              padding-bottom: 5%;
            }
            .userMsg{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
        .function-item{
          display: flex;
          text-align: center;
          .van-icon{
            font-size: 24px;
            padding-bottom: 12px;
          }
          div{
            flex: 1;
          }
          span{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1F242B;
            display: block;
          }
          .find{}
          .mortgage{}
          .footprint{}
          .collect{}
        }
      }
    }
    .dataStatistics{
      margin-top: 1px;
      padding: 15px 16px;
      height: 128px;
      box-sizing: border-box;
      background-color: white;
      .title{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        padding-bottom: 10px;
      }
      .content{
        display: flex;
        justify-content: space-between;
        img{
          flex: 1;
          width: 100%;
        }
      }
    }
    .other-function{
      .my-car{
        height: 56px;
        background-color: white;
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 18px;
        box-sizing: border-box;
        .left{
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          display: flex;
          align-items: center;
          span{
            padding-left: 17px;
          }
        }
        .right{}
      }

    }
  }
</style>